<template>
  <div>
    <div class="bg">
      <div class="shopBox">
        <div class="left">
          <van-image :src="`${resourceURL}${shopInfo.imagesurl}`" fit='cover' />
        </div>
        <div class="center">
          <div class="shopName">{{ shopInfo.shop_name}}</div>
          <div class="phone">{{shopInfo.shop_phone}}</div>
          <div class="address">{{shopInfo.province}}{{shopInfo.city}}{{shopInfo.area}}{{shopInfo.street}}{{shopInfo.address}}</div>
        </div>
        <div class="right">
          <van-image :src="require('../../assets/img/Housekeeping/phone.png')" fit='cover' round />

        </div>
      </div>
      <van-list v-model="loading" :finished="finished" @load="onLoad" :error.sync="err" error-text="加载失败，点击这里重试">
        <div class="Box" v-for="(item, index) in list" :key="index">
          <div class="image">
            <van-image :src="`${resourceURL}${item.top_pic}`" fit="cover" />
          </div>
          <div class="info">
            <p>{{ item.service_name }}</p>
            <div class="bottom">
              <div>￥{{item.mprice  }}</div>
              <van-button round @click="$router.push({ name: 'HousekeepingDetail',query: { id: item.service_id }})">查看详情</van-button>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      shopInfo: "",
      page: 1,
      limit: 6,
      loading: false,
      finished: true,
      err: false,
      list: []
    }
  },
  computed: {

  },
  watch: {

  },
  created () {
    this.shopinfo()
    this.shopservicelist()
  },
  mounted () {

  },
  methods: {
    onLoad () {
      this.page++
      this.shopservicelist()
    },
    // 获取店铺详情
    shopinfo () {
      this.$axios.get(this.$api.shopinfo, {
        params: {
          shop_id: this.$route.query.shop_id,

        }
      }).then((res) => {
        this.shopInfo = res.data.data

      })
    },
    shopservicelist () {
      this.loading = true

      this.$axios.get(this.$api.shopservicelist, {
        params: {
          shop_id: this.$route.query.shop_id,
          page: this.page,
          limit: this.limit
        }
      }).then((res) => {
        this.loading = false
        if (res.data.code == 1) {
          if (res.data.data.length < this.limit) {
            this.finished = true
          } else {
            this.finished = false
          }

          this.list = this.list.concat(res.data.data)
        } else {
          this.err = true;
          this.loading = false;
        }


      })
    }
  }
};
</script>
<style lang='less' scoped>
.bg {
  width: 100%;
  height: 171px;
  background: url('../../assets/img/Housekeeping/bg.png');
  background-size: 100% 100%;
  padding-top: 24px;
  position: relative;
  .shopBox {
    width: 343px;
    height: 109px;
    position: absolute;
    top: 80px;
    left: 16px;
    background: #ffffff;
    box-shadow: 0px 3px 10px 1px rgba(1, 12, 27, 0.04);
    border-radius: 6px;

    padding: 12px;
    box-sizing: border-box;
    display: flex;
    .left {
      .van-image {
        width: 83px;
        height: 85px;
        border-radius: 5px;
      }
    }
    .center {
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      font-size: 12px;
      color: #202327;
      .shopName {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #06021a;
        margin-bottom: 12px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
      .phone {
        margin-bottom: 6px;
      }
      .address {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }
    .right {
      margin-left: 29px;
      .van-image {
        width: 16px;
        height: 16px;
      }
    }
  }
}
.van-list {
  box-sizing: border-box;
  margin: 0 16px;
  margin-top: 177px;
  display: grid;
  grid-template-columns: repeat(2, 174px);
  width: 100%;
  .Box {
    width: 168px;
    height: 236px;
    background: #ffffff;
    box-shadow: 0px 3px 10px 1px rgba(1, 12, 27, 0.06);
    border-radius: 6px 6px 6px 6px;
    box-sizing: border-box;
    margin-bottom: 22px;
    .image {
      /deep/ .van-image {
        width: 168px;
        height: 168px;
      }
    }
    .info {
      height: 68px;
      box-sizing: border-box;
      padding: 12px;
      font-size: 14px;
      p {
        color: #201d1d;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bottom {
        color: #e92525;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        .van-button {
          width: 60px;
          height: 22px;
          background: #ff7733;
          border-radius: 15px;
          white-space: nowrap;
          font-size: 11px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>